<!-- 手机验证码登录组件 -->
<template>
  <div class="phonelogin">
    <div class="user-login-box">
      <div class="user-login">
        <div class="user-login-head">
          <router-link to="/login" class="iconfont icon-fanhui1"></router-link>
          <h1>短信验证码登录</h1>
        </div>
        <div class="user-login-ul">
          <div class="form-item">
            <div class="form-item_content">
              <div class="item-input">
                <div class="label">
                  <i class="iconfont icon-pic"></i>
                </div>
                <div class="value">
                  <div class="input input-username">
                    <input
                      type="text"
                      placeholder="请输入图片验证码"
                      v-model="captchacode"
                    />
                  </div>
                </div>
                <div class="code">
                  <img
                    src="http://localhost:3000/api/captcha"
                    ref="captcha"
                    @click="getcaptcha"
                    alt
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="form-item">
            <div class="form-item_content">
              <div class="item-input">
                <div class="label">
                  <i class="iconfont icon-mobile"></i>
                </div>
                <div class="value">
                  <div class="input input-password">
                    <input
                      type="text"
                      placeholder="请输入手机号"
                      maxlength="11"
                      v-model="phone"
                    />
                  </div>
                </div>
                <div class="key">
                  <label v-if="!num" @click="getPhoneCode">获取验证码</label>
                  <label v-else>重新发送({{ num }}s)</label>
                </div>
              </div>
            </div>
          </div>
          <div class="form-item">
            <div class="form-item_content">
              <div class="item-input">
                <div class="label">
                  <i class="iconfont icon-yuechi"></i>
                </div>
                <div class="value">
                  <div class="input input-password">
                    <input
                      type="text"
                      placeholder="请输入短信验证码"
                      maxlength="6"
                      v-model="phonecode"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <button type="button" class="btn" @click="phoneLoginFn">
          立即登录
        </button>
        <p class="tips">
          若您输入的手机号未注册，将会进入注册流程。注册即视为同意
          <a href="javascript:;">《用户协议》</a>
        </p>
      </div>
      <div class="mess-login">
        <router-link to="/login" tag="a">
          账号密码登录
          <i class="iconfont icon-fanhui2"></i>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Toast } from "mint-ui";
import { getPhoneCodeApi } from "@/api/index.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      num: 0,
      captchacode: "",
      phone: "",
      phonecode: "",
      timer: null,
    };
  },
  //监听属性 类似于data概念
  computed: {
    validatePhone() {
      return /^1[3|4|5|7|8][0-9]{9}$/.test(this.phone);
    },
    isLogin() {
      return this.$store.state.isLogin;
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getcaptcha() {
      //   console.log(this.$refs.captcha.src);
      this.$refs.captcha.src =
        "http://localhost:3000/api/captcha?t=" + new Date().getTime();
    },
    async getPhoneCode() {
      if (this.phone) {
        if (this.validatePhone) {
          this.num = 60;
          this.timer = setInterval(() => {
            this.num--;
            if (this.num == 0) {
              clearInterval(this.timer);
            }
          }, 1000);
          //调用获取验证码的接口
          let result = await getPhoneCodeApi({ phone: this.phone });
          console.log(result);
        } else {
          Toast("手机号格式不正确");
        }
      } else {
        Toast("手机号不能为空");
      }
    },
    phoneLoginFn() {
      this.$store.dispatch("ActPhoneLogin", {
        captcha: this.captchacode,
        phonecode: this.phonecode,
        phone: this.phone,
      });
      this.$router.push("/person");
    },
  },
};
</script>
<style lang="less">
.phonelogin {
  width: 100%;
  height: 100%;
  position: fixed;
  background: #fff;
  .user-login-box {
    box-sizing: border-box;
    height: 100%;
    padding: 1.1rem;
    .user-login {
      .user-login-head {
        position: relative;
        margin-top: 1rem;
        .icon-fanhui1 {
          color: #bdbdbd;
          font-size: 1.8rem;
        }
        h1 {
          font-size: 2.6rem;
          margin-top: 3.5rem;
          line-height: 1.1;
          font-weight: 500;
        }
      }
      .user-login-ul {
        margin-top: 2.5rem;
        overflow: hidden;
        .form-item {
          .form-item_content {
            line-height: 40px;
            position: relative;
            font-size: 14px;
            .item-input {
              display: flex;
              justify-content: space-between;
              border-bottom: 1px solid #ddd;
              overflow: hidden;
              padding: 0.8rem 0;
              position: relative;
              font-size: 1.5rem;
              .label {
                min-width: 2rem;
                height: 2.4rem;
                line-height: 2.4rem;
                .iconfont {
                  color: #bdbdbd;
                  margin-right: 0.5rem;
                  font-size: 1.5rem;
                }
                .icon-pic {
                  font-size: 1.3rem;
                }
              }
              .value {
                width: 100%;
                height: 2.4rem;
                line-height: 2.4rem;
                .input {
                  display: block;
                  width: 100%;
                  position: relative;
                  input {
                    border: 0;
                    box-sizing: border-box;
                    width: 100%;
                    color: #666;
                    font-size: 1.4rem;
                    padding: 0 1rem 0 0;
                    outline: 0;
                    transition: border-color 0.2s
                      cubic-bezier(0.645, 0.045, 0.355, 1);
                    background: none;
                    &::-webkit-input-placeholder {
                      color: #bdbdbd;
                    }
                  }
                }
              }
              .code {
                line-height: 0;
                img {
                  height: 2.4rem;
                }
              }
              .key {
                width: 50%;
                line-height: 2.4rem;
                label {
                  width: 100%;
                  box-sizing: border-box;
                  text-align: center;
                  font-size: 1.3rem;
                  color: #bdbdbd;
                  border-left: 1px solid #d7d7d7;
                  outline: 0;
                  background-color: #fff;
                  box-shadow: none;
                  padding: 0 1rem;
                  display: inline-block;
                  max-width: 100%;
                  font-weight: 400;
                  margin-bottom: 0;
                }
              }
            }
          }
        }
        .operation {
          display: flex;
          justify-content: space-between;
          margin: 0.5rem 0 0;
          .new-register,
          .list-password {
            font-size: 1.3rem;
            line-height: 2;
            color: #4b89dc;
          }
        }
      }
      .btn {
        margin-top: 2rem;
        border-radius: 0.5rem;
        background: #f92028;
        font-size: 1.2rem;
        color: #fff;
        border: 0;
        text-align: center;
        padding: 1rem 0;
        width: 100%;
        display: block;
        outline: none;
      }
      .tips {
        font-size: 1.3rem;
        color: #888;
        margin-top: 0.5rem;
        line-height: 1.5;
        a {
          color: #4b89dc;
        }
      }
    }
    .mess-login {
      margin-top: 3.5rem;
      a {
        width: 100%;
        display: block;
        text-align: center;
        font-size: 1.4rem;
        color: #f92028;
        font-weight: 500;
        .icon-fanhui2 {
          margin-left: 0.5rem;
          font-size: 1.3rem;
        }
      }
    }
  }
}
</style>